baubs git - /page/blob.mu

Micron Document

baubs git

Node / mirrors / respira / files / src / components / NextStepGuide.tsx

Displaying Raw • Download

src/components/NextStepGuide.tsx f80cabc5f2a2801d727187b8ab310aa8daecd8a2 (f80cabc5) Text, 15.60 KB

import { InformationCircleIcon, ExclamationTriangleIcon } from '@heroicons/react/24/solid';

import { MachineStatus } from '../types/machine';

import { getErrorDetails } from '../utils/errorCodeHelpers';

interface NextStepGuideProps {

machineStatus: MachineStatus;

isConnected: boolean;

hasPattern: boolean;

patternUploaded: boolean;

hasError: boolean;

errorMessage?: string;

errorCode?: number;

}

export function NextStepGuide({

machineStatus,

isConnected,

hasPattern,

patternUploaded,

hasError,

errorMessage,

errorCode

}: NextStepGuideProps) {

// Don't show if there's an error - show detailed error guidance instead

if (hasError) {

const errorDetails = getErrorDetails(errorCode);

// Check if this is informational (like initialization steps) vs a real error

if (errorDetails?.isInformational) {

return (

{errorDetails.title}

</h3>

{errorDetails.description}

</p>

{errorDetails.solutions && errorDetails.solutions.length > 0 && (

<h4 className="font-semibold text-blue-900 dark:text-blue-200 mb-2">Steps:</h4>

{errorDetails.solutions.map((solution, index) => (

<li key={index} className="pl-2">{solution}</li>

))}

</ol>

</>

)}

</div>

);

}

// Regular error display for actual errors

return (

{errorDetails?.title || 'Error Occurred'}

</h3>

{errorDetails?.description || errorMessage || 'An error occurred. Please check the machine and try again.'}

</p>

{errorDetails?.solutions && errorDetails.solutions.length > 0 && (

{errorDetails.solutions.map((solution, index) => (

<li key={index} className="pl-2">{solution}</li>

))}

</ol>

</>

)}

{errorCode !== undefined && (

Error Code: 0x{errorCode.toString(16).toUpperCase().padStart(2, '0')}

</p>

)}

</div>

);

}

// Determine what to show based on current state

if (!isConnected) {

return (

<h3 className="text-lg font-semibold text-blue-900 dark:text-blue-200 mb-2">Step 1: Connect to Machine</h3>

<p className="text-blue-800 dark:text-blue-300 mb-3">To get started, connect to your Brother embroidery machine via Bluetooth.</p>

<li>Make sure your machine is powered on</li>

<li>Enable Bluetooth on your machine</li>

<li>Click the "Connect to Machine" button below</li>

</ul>

</div>

);

}

if (!hasPattern) {

return (

<h3 className="text-lg font-semibold text-blue-900 dark:text-blue-200 mb-2">Step 2: Load Your Pattern</h3>

<p className="text-blue-800 dark:text-blue-300 mb-3">Choose a PES embroidery file from your computer to preview and upload.</p>

<li>Click "Choose PES File" in the Pattern File section</li>

<li>Select your embroidery design (.pes file)</li>

<li>Review the pattern preview on the right</li>

<li>You can drag the pattern to adjust its position</li>

</ul>

</div>

);

}

if (!patternUploaded) {

return (

<h3 className="text-lg font-semibold text-blue-900 dark:text-blue-200 mb-2">Step 3: Upload Pattern to Machine</h3>

<p className="text-blue-800 dark:text-blue-300 mb-3">Send your pattern to the embroidery machine to prepare for sewing.</p>

<li>Review the pattern preview to ensure it's positioned correctly</li>

<li>Check the pattern size matches your hoop</li>

<li>Click "Upload to Machine" when ready</li>

<li>Wait for the upload to complete (this may take a minute)</li>

</ul>

</div>

);

}

// Pattern is uploaded, guide based on machine status

switch (machineStatus) {

case MachineStatus.IDLE:

return (

<h3 className="text-lg font-semibold text-blue-900 dark:text-blue-200 mb-2">Step 4: Start Mask Trace</h3>

<p className="text-blue-800 dark:text-blue-300 mb-3">The mask trace helps the machine understand the pattern boundaries.</p>

<li>Click "Start Mask Trace" button in the Sewing Progress section</li>

<li>The machine will trace the pattern outline</li>

<li>This ensures the hoop is positioned correctly</li>

</ul>

</div>

);

case MachineStatus.MASK_TRACE_LOCK_WAIT:

return (

<h3 className="text-lg font-semibold text-yellow-900 dark:text-yellow-200 mb-2">Machine Action Required</h3>

<p className="text-yellow-800 dark:text-yellow-300 mb-3">The machine is ready to trace the pattern outline.</p>

<li><strong>Press the button on your machine</strong> to confirm and start the mask trace</li>

<li>Ensure the hoop is properly attached</li>

<li>Make sure the needle area is clear</li>

</ul>

</div>

);

case MachineStatus.MASK_TRACING:

return (

<h3 className="text-lg font-semibold text-cyan-900 dark:text-cyan-200 mb-2">Mask Trace In Progress</h3>

<p className="text-cyan-800 dark:text-cyan-300 mb-3">The machine is tracing the pattern boundary. Please wait...</p>

<li>Watch the machine trace the outline</li>

<li>Verify the pattern fits within your hoop</li>

<li>Do not interrupt the machine</li>

</ul>

</div>

);

case MachineStatus.MASK_TRACE_COMPLETE:

case MachineStatus.SEWING_WAIT:

return (

<h3 className="text-lg font-semibold text-green-900 dark:text-green-200 mb-2">Step 5: Ready to Sew!</h3>

<p className="text-green-800 dark:text-green-300 mb-3">The machine is ready to begin embroidering your pattern.</p>

<li>Verify your thread colors are correct</li>

<li>Ensure the fabric is properly hooped</li>

<li>Click "Start Sewing" when ready</li>

</ul>

</div>

);

case MachineStatus.SEWING:

return (

<h3 className="text-lg font-semibold text-cyan-900 dark:text-cyan-200 mb-2">Step 6: Sewing In Progress</h3>

<p className="text-cyan-800 dark:text-cyan-300 mb-3">Your embroidery is being stitched. Monitor the progress below.</p>

<li>Watch the progress bar and current stitch count</li>

<li>The machine will pause when a color change is needed</li>

<li>Do not leave the machine unattended</li>

</ul>

</div>

);

case MachineStatus.COLOR_CHANGE_WAIT:

return (

<h3 className="text-lg font-semibold text-yellow-900 dark:text-yellow-200 mb-2">Thread Change Required</h3>

<p className="text-yellow-800 dark:text-yellow-300 mb-3">The machine needs a different thread color to continue.</p>

<li>Check the color blocks section to see which thread is needed</li>

<li>Change to the correct thread color</li>

<li><strong>Press the button on your machine</strong> to resume sewing</li>

</ul>

</div>

);

case MachineStatus.PAUSE:

case MachineStatus.STOP:

case MachineStatus.SEWING_INTERRUPTION:

return (

<h3 className="text-lg font-semibold text-yellow-900 dark:text-yellow-200 mb-2">Sewing Paused</h3>

<p className="text-yellow-800 dark:text-yellow-300 mb-3">The embroidery has been paused or interrupted.</p>

<li>Check if everything is okay with the machine</li>

<li>Click "Resume Sewing" when ready to continue</li>

<li>The machine will pick up where it left off</li>

</ul>

</div>

);

case MachineStatus.SEWING_COMPLETE:

return (

<h3 className="text-lg font-semibold text-green-900 dark:text-green-200 mb-2">Step 7: Embroidery Complete!</h3>

<p className="text-green-800 dark:text-green-300 mb-3">Your embroidery is finished. Great work!</p>

<li>Remove the hoop from the machine</li>

<li>Press the Accept button on the machine</li>

<li>Carefully remove your finished embroidery</li>

<li>Trim any jump stitches or loose threads</li>

<li>Click "Delete Pattern" to start a new project</li>

</ul>

</div>

);

default:

return null;

}

Served by rngit 1.4.2 - Generated in 0.05s